2024-12-01 일

Moment.js 대신 Day.js - 프론트엔드 번들 사이즈 줄이기

• 번들크기 체크

Date는 어떻게 주고 받는게 바람직할까요?

1. UTC offset 명시
"2022-09-21T12:00:00+09:00"

2. UTC ISO string
"2022-09-21T03:00:00Z"

3. Unix Timestamp
1663729200000

Common mistakes with React Testing Library

/ ❌
fireEvent.change(input, { target: { value: "hello world" } });

// ✅
userEvent.type(input, "hello world");

• userEvent는 fireEvent를 기반으로 빌드된 패키지이다.
  • 사용자 상호작용과 더 유사한 여러 메서드를 제공한다.
  • fireEvent.change는 단순히 input의 하나의 변경 이벤트를 트리거함
  • 하지만, type 호출은 문자마다 keyDown, keyPress, keyUp 이벤트를 트리거함 → 훠린 실제 사용자 상호작용과 유사함

2024-12-08 일

‘use client’가 CSR이라고 알고 있는 거 아니죠? Next.js 면접질문 정복

• 클라이언트 컴포넌트는 use client 선언 필요
• 클라이언트 컴포넌트도 SSR 가능, 서버에서 HTML 렌더링 후 하이드레이션
• 서버 컴포넌트: 하이드레이션 없이 HTML만 전달 → JS 번들 감소, 성능 개선

2024-12-22 일

(번역) CSS content-visibility를 이용해 렌더링 성능 향상 시키기

• 해당 내용은 브라우저의 유용한 기능 및 설명이 참조로 잘 반영되어있음